<!--
 * @Author: xuhy 1727317079@qq.com
 * @Date: 2022-09-04 09:48:48
 * @LastEditors: xuhy 1727317079@qq.com
 * @LastEditTime: 2022-09-08 10:50:44
 * @FilePath: \vue3_test\src\App.vue
 * @Description: Demo
-->
<template>
  <h1>一个人的信息</h1>
  <h2>姓名: {{ person.name }}</h2>
  <h2>年龄: {{ person.age }}</h2>
  <button @click="test">测试触发一下DemoTest组件的hello事件</button>
</template>

<script>
import { reactive } from "vue";
export default {
  name: "DemoTest",
  // Vue2和Vue3都可以配置props
  props: ["msg", "name"],
  // 声明接收父组件定义的事件
  emits: ["hello"],
  setup(props, context) {
    // console.log("---setup---", props);
    console.log("---setup---", context);
    // console.log("---setup---", context.attrs); // 相当于Vue2中的$attrs
    // console.log("---setup---", context.emit); // 触发了自定义事件
    console.log("---setup---", context.slots); // 插槽
    let person = reactive({
      name: "张三",
      age: 18,
    });

    function test() {
      context.emit("hello", 666);
    }
    // 返回一个对象(常用)
    return {
      person,
      test,
    };
  },
};
</script>
